<template>
  <el-row :gutter="20">
    <el-col :span="24">
      <div class="title flex justify-between pr-40px">
        <span>污染物特性、浓度子项评分</span>
        <span><el-button type="primary" size="default" @click="open(1)">编辑</el-button></span>
      </div>
      <div class="pl-40px pr-40px">
        <el-table :data="list" border>
          <el-table-column fixed="left" type="index" label="序号" width="70" />
          <el-table-column fixed="left" prop="name" label="技术" width="180" align="center" />
          <el-table-column label="污染物类型" align="center">
            <el-table-column prop="zjs" label="重金属" align="center" />
            <el-table-column prop="wjw" label="无机物" align="center" />
            <el-table-column prop="ldVocs" label="卤代VOCs" align="center" />
            <el-table-column prop="fldVocs" label="非卤代VOCs" align="center" />
            <el-table-column prop="ldSvocs" label="卤代SVOCs" align="center" />
            <el-table-column prop="fldSvocs" label="非卤代SVOCs" align="center" />
            <el-table-column prop="syl" label="石油类" align="center" />
          </el-table-column>
          <el-table-column label="NAPL" align="center">
            <el-table-column prop="ywLnapl" label="NAPL" align="center" />
            <el-table-column prop="ywDnapl" label="LNAPL" align="center" />
          </el-table-column>
          <el-table-column label="有机物浓度" align="center">
            <el-table-column prop="yjwG" label="高" align="center" />
            <el-table-column prop="yjwZ" label="中" align="center" />
            <el-table-column prop="yjwD" label="低" align="center" />
          </el-table-column>
          <el-table-column label="无机物浓度" align="center">
            <el-table-column prop="wjwG" label="高" align="center" />
            <el-table-column prop="wjwZ" label="中" align="center" />
            <el-table-column prop="wjwD" label="低" align="center" />
          </el-table-column>
        </el-table>
      </div>
    </el-col>

    <el-col :span="24" class="mt-20px">
      <div class="title flex justify-between pr-40px">
        <span>水文地质条件、水化学子项评分</span>
        <span><el-button type="primary" size="default" @click="open(2)">编辑</el-button></span>
      </div>
      <div class="pl-40px pr-40px">
        <el-table :data="list" border>
          <el-table-column fixed="left" type="index" label="序号" width="70" />
          <el-table-column fixed="left" prop="name" label="技术" width="180" align="center" />
          <el-table-column prop="bqdzyjzlx" label="包气带主要介质类型" align="center" />
          <el-table-column prop="badhd" label="包气带厚度" align="center" />
          <el-table-column prop="hscstxs" label="含水层渗透系数" align="center" />
          <el-table-column prop="dxswnjbh" label="地下水位年际变化" align="center" />
          <el-table-column prop="dxslx" label="地下水流速" align="center" />
          <el-table-column prop="ph" label="pH" align="center" />
          <el-table-column prop="eh" label="eh" align="center" />
        </el-table>
      </div>
    </el-col>
    <template
      v-for="key1 in weightData.filter((item) => item.name !== '技术有效性')"
      :key="key1.id"
    >
      <el-col :span="12">
        <div class="title">
          <span> {{ key1.name }} </span>
        </div>
        <div class="pt-20px">
          <el-table :data="list" border>
            <el-table-column fixed="left" type="index" label="序号" width="70px" />
            <el-table-column fixed="left" prop="name" label="技术" width="170px" align="center" />

            <el-table-column :label="key1.name" align="center">
              <el-table-column
                v-for="key2 in key1.children"
                :key="key2.id"
                :props="key2.keyName"
                :label="key2.name"
                align="center"
                min-width="120"
              >
                <template #default="scoped" v-if="!key2.children || !key2.children.length">
                  <el-input v-model="list[scoped.$index][key2.keyName]" placeholder="请输入" />
                </template>

                <template
                  v-if="key2.children && key2.children.length && key1.name !== '技术有效性'"
                >
                  <el-table-column
                    v-for="key3 in key2.children"
                    :key="key3.id"
                    :prop="key3.keyName"
                    :label="key3.name"
                    align="center"
                    min-width="120"
                  >
                    <template #default="scoped">
                      <el-input v-model="list[scoped.$index][key3.keyName]" placeholder="请输入" />
                    </template>
                  </el-table-column>
                </template>
              </el-table-column>
            </el-table-column>
          </el-table>
        </div>
      </el-col>
    </template>
  </el-row>
  <ScoreTable ref="scoreTableRef" @success="update" />
</template>

<script setup lang="ts">
import ScoreTable from './score-table.vue'

const { weightData, score } = defineProps({
  weightData: {
    type: Array as any,
    default: () => []
  },
  score: {
    type: Array as any,
    default: () => []
  }
})

const list = ref([...score])

const submit = () => {
  return list.value
}

const update = (data) => {
  list.value = list.value.map((element) => {
    const find = data.find((item) => item.name === element.name)
    return {
      ...element,
      ...find
    }
  })
}
defineExpose({ submit })

const scoreTableRef = ref()
const open = (ttype: number) => {
  scoreTableRef.value.open(list.value, ttype)
}

/**
 * 有效性特殊处理
 */
</script>

<style lang="scss" scoped>
// 标题样式
.title {
  position: relative;
  padding-left: 20px;
  margin-top: 30px;
  margin-bottom: 10px;
  font-size: 18px;
  font-weight: 600;
  line-height: 30px;
  letter-spacing: 0.5px;
  color: var(--el-font-color-primary);

  &::before {
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: #50bfff;
    border-bottom-left-radius: 5px;
    border-top-left-radius: 5px;
    content: '';
  }
}
</style>
